<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--1. 引入文件 -->
    <script src="../swiper/js/swiper.min.js"></script>
    <link rel="stylesheet" href="../swiper/css/swiper.min.css">
    <style>

        .mybanner{
            width:800px;
            height:320px;
            margin:50px auto;
        }
        .img{
            width:800px;
            height:320px;
        }
    </style>
</head>
<body>
    <!-- 2. 满足静态结构   -->  
    <div class="swiper-container mybanner"  id="banner">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../imgs/1.jpg" alt="" class="img">
            </div>
            <div class="swiper-slide"><img src="../imgs/2.jpg" alt="" class="img"></div>
            <div class="swiper-slide"><img src="../imgs/3.jpg" alt="" class="img"></div>
            <div class="swiper-slide"><img src="../imgs/4.jpg" alt="" class="img"></div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-pagination"></div>
    </div>

    <script>
        // 3. 插件实例化 
        console.log(new Swiper);
        var myswipe = new Swiper(".mybanner",{
            speed:1800,
            autoplay:{
                delay: 3000,
                pauseOnMouseEnter:true,
            } , //自动播放   
            direction : 'vertical',   // 滑动的方向 
            loop:true,          // 循环播放
            mousewheel:true,
            navigation: {    // 前进后退按钮
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {   // 分页器
                el: '.swiper-pagination',
                clickable:true,
            },

            // effect : 'fade',
            // fadeEffect: {
            //     crossFade: true,
            // }
            // effect : 'cube',
            // cubeEffect: {
            //     slideShadows: true,
            //     shadow: true,
            //     shadowOffset: 100,
            //     shadowScale: 0.6
            // },
            // effect : 'coverflow',
            // slidesPerView: 3,
            // centeredSlides: true,
            // coverflowEffect: {
            //     rotate: 30,
            //     stretch: 10,
            //     depth: 60,
            //     modifier: 2,
            //     slideShadows : true
            // },

            // effect : 'flip',
            // flipEffect: {
            //     slideShadows : true,
            //     limitRotation : true,
            // },

            on:{
                slideChange: function(){
                    console.log('改变了，activeIndex为'+this.activeIndex);
                },
            }
        })
    </script>
</body>
</html>